<!DOCTYPE html>
<html>
<head>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title id="doctitle">index</title>
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Expires" content="-1">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta content="telephone=no" name="format-detection"/>
    <meta name="screen-orientation" content="portrait">
    <!-- uc强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <!-- Bootstrap Js -->
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="bootstrap/js/respond.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/echarts/echarts.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
    <script src="js/grxx.js"></script>
    
    <style>
     .grxxtop2 { width:95%; height:3em; position:absolute; z-index:10; left:2%; top:2%; }
	 .btnTop01 { display:block; float:left; width:20%; height:100%; }
	 .btnTop02 { display:block; float:right; width:20%; height:100%; text-align:right;  }
	 .btnTop03 { display:block; float:left; width:59%; height:100%; text-align:center; font-size:1.2em; color:#e8e8e8;  }
	 .btnTop03 span { font-size:1.5em; }
	 .userpagetop { float:left; width:100%; height:auto; background:#2191f5;  }
	 .userpagetop img { width:100%; }
	 .userpagebox { float:left; width:100%; height:auto;  }
	 .userpagebox a { color:#666666; }
	 .userpagebox p { margin:0px; border-bottom:1px solid #dddddd; clear:both; }
	 .userpagebox img { display:block; float:left; margin-left:0.6em; margin-top:0.5em; margin-bottom:0.5em; height:2em; }
	 .userpagetit { display:block; float:left; width:auto; height:auto; margin-left:0.5em; margin-top:0.7em; }
	</style>
</head>

<body>

<div class="grxxtop2">
<a href="index.html" class="btnTop01"><img src="images/grxx_fh.png" style="width:auto; height:2.5em;"></a>
<div class="btnTop03" >Read <span>12</span> of <span>50</span></div>
<a href="#" class="btnTop02"><img src="images/grxx_r.png" style="width:auto; height:2.5em;"></a>
</div>

<!--  <div class="userpagetop"><img src="images/grxx.jpg"  alt=""/></div>-->
<div id="grxx11" style="height:400px; padding-top:1em; background:url(images/grxx.jpg) no-repeat; filter:'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)'; -moz-background-size:100% 100%;  background-size:100% 100%;"></div>
<div class="userpagebox">
     <p><img src="images/userpagepic1.png" alt=""/><div class="userpagetit"><a href="#">My preset source</a></div></p>
     <p><img src="images/userpagepic2.png" alt=""/><div class="userpagetit"><a href="#">My preset keyword</a></div></p>
     <p><img src="images/userpagepic3.png" alt=""/><div class="userpagetit"><a href="#">My reading growth log</a></div></p>
     <p><img src="images/userpagepic4.png" alt=""/><div class="userpagetit"><a href="myfavorite.html">My favorite</a></div></p>
     <p><img src="images/userpagepic5.png" alt=""/><div class="userpagetit"><a href="myshare.html">My share</a></div></p>
     <p><img src="images/userpagepic6.png" alt=""/><div class="userpagetit"><a href="#">Settings</a></div></p>
</div>

</body>
</html>